How to Create Stunning Border Animation Using Pure CSS | Border Animation CSS

byCodeWithMe -
0

 🎨 How to Create Stunning Border Animation Using Pure CSS

Looking to add eye-catching effects to your webpage? One of the most elegant ways is by using CSS border animations. With just a few lines of code, you can give your elements a glowing, rotating animated border that grabs attention without the need for JavaScript or external libraries.




In this tutorial, we’ll walk you through how to create a beautiful animated border effect around a card using pure CSS. This effect uses @property, conic-gradient, and keyframes for smooth performance and sleek visuals.

🚀 Why Use Border Animation in CSS?

CSS border animations are perfect for:

  • Highlighting cards, buttons, or containers.

  • Creating visual interest without affecting performance.

  • Making your UI look more modern and professional.

💡 Live Preview: What Are We Building?

CSS Border Animation Preview <!-- Replace with actual preview image if needed -->

We’re going to build a card with a rotating, multi-color border glow. It looks dynamic, futuristic, and is fully responsive.

🛠 Full Source Code for CSS Border Animation

Below is the complete HTML and CSS code for the animation:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html {
        font-family: "Poppins", sans-serif;
        color: #f0f0f0;
      }

      body {
        min-height: 100vh;
        background: #0b0d15;
        color: #a2a5b3;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      h1 {
        color: white;
      }

      .card {
        padding: 2em;
        width: 300px;
        background: #1c1f2b;
        text-align: center;
        border-radius: 10px;
        position: relative;
      }

      @property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }

      .card::after,
      .card::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
        padding: 3px;
        border-radius: 10px;
        animation: spin 3s linear infinite;
      }

      .card::before {
        filter: blur(1.5rem);
        opacity: 1.5;
      }

      @keyframes spin {
        from {
          --angle: 0deg;
        }
        to {
          --angle: 360deg;
        }
      }
    </style>
    <title>CSS Border Animation</title>
  </head>
  <body>
    <div class="card">
      <h1>Border Animation</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam id
        porro ab, tempore minima similique incidunt veniam quae enim culpa
        obcaecati quas ipsam officia veritatis dolores asperiores, saepe fugit
        aliquid!
      </p>
    </div>
  </body>
</html>

🔍 Explanation of Key Concepts

1. @property --angle

We use the CSS @property rule to define a custom property --angle, which allows us to animate angles smoothly in the conic gradient.

2. conic-gradient()

This creates the rotating rainbow-like effect around the card. It starts at the --angle value, which we continuously rotate using a keyframe animation.

3. ::before and ::after Pseudo-elements

These layers allow us to create both a sharp edge and a glowing blur for the border, giving the animation more depth.

4. animation: spin

We use a CSS keyframe to animate the --angle from 0deg to 360deg continuously.

✅ Final Thoughts

Using pure CSS for animations like this means faster load times, smoother performance, and no dependency on JavaScript. Whether you’re building a portfolio, landing page, or web app — this kind of animation can add a touch of magic ✨ to your UI.

Tags

You may like these posts

Post a Comment

Previous Post Next Post